<!-- 半圆环图 -- 空气api -->
<script setup>
import { onMounted, reactive, ref, toRefs, watch, computed } from 'vue';
import * as echarts from 'echarts';
const props = defineProps({
    value: {},
    text: {},
    numColor: {}
});

onMounted(() => {
    fn.renderChart();
});
watch(
    () => props.value,
    (newVal, oldVal) => {
        fn.renderChart();
    }
);
// 渐变色
const gradient = [
    {
        offset: 0,
        color: '#2988c9' // 0% 处的颜色
    },
    {
        offset: 0.3,
        color: '#28afe4' // 30% 处的颜色
    },
    {
        offset: 0.6,
        color: '#29cbf7' // 60% 处的颜色
    },

    {
        offset: 1,
        color: '#06d8fc' // 100% 处的颜色
    }
];
// 盒子容器
const halfRings = ref(null);
const state = reactive({
    goodColor: '#0ed462',
    badColor: '#ea8f26',
    noDataColor: '#aaa',
    textStyle: {
        textAlign: 'center',
        fontSize: 16,
        lineHeight: 24,
        color: '#fff'
    },
    option: {
        backgroundColor: '#347cba',

        angleAxis: {
            show: false,
            max: (100 * 360) / 180, //-45度到225度，二者偏移值是270度除360度
            type: 'value',
            startAngle: 180, //极坐标初始角度
            splitLine: {
                show: false
            }
        },
        barMaxWidth: 10, //圆环宽度
        radiusAxis: {
            show: false,
            type: 'category'
        },
        //圆环位置和大小
        polar: {
            center: ['50%', '70%'], //左 上
            radius: '160%'
        },
        series: [
            {
                type: 'bar',
                data: [
                    {
                        //上层圆环，显示数据
                        value: '',
                        itemStyle: {
                            // x 左下角 y 左上角 x2右下角  y2右上角 。我想让它从左往右变色，则应该是x -> x2
                            color: {
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                //颜色坐标是反着来的
                                colorStops: gradient
                            }
                        }
                    }
                ],
                barGap: '-100%', //柱间距离,上下两层圆环重合
                coordinateSystem: 'polar',
                roundCap: true, //顶端圆角
                z: 3 //圆环层级，同zindex
            },
            {
                //下层圆环，显示最大值
                type: 'bar',
                data: [
                    {
                        value: 100,
                        itemStyle: {
                            color: '#EFEFEF',
                            borderWidth: 0
                        }
                    }
                ],
                barGap: '-100%',
                coordinateSystem: 'polar',
                roundCap: true,
                z: 1
            },
            //仪表盘
            {
                type: 'gauge',
                startAngle: 225, //起始角度，同极坐标
                endAngle: -45, //终止角度，同极坐标
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitLabel: {
                    show: false
                },
                pointer: {
                    // 分隔线
                    show: false, //是否显示指针
                    shadowColor: 'auto', //默认透明
                    shadowBlur: 5,
                    length: '50%',
                    width: '2'
                },

                itemStyle: {
                    color: '#1598FF',
                    borderColor: '#1598FF',
                    borderWidth: 3
                },
                // 圆环图中间描述
                detail: {
                    valueAnimation: true, // 数字动画是否开启
                    fontSize: 30,
                    lineHeight: 30, //文字行高，rich默认会从此继承
                    // color: '#fff',
                    offsetCenter: [0, '50%'], // 左 上
                    fontWeight: 'bold',
                    // **在函数调用里面就能取props里面的值，是响应式的，直接以键值对的形式写的话就不行
                    formatter: function (value) {
                        return (
                            '{a|' + props.text + '}' + '\n' + value + '{b|%}'
                        );
                    },
                    rich: {
                        // 文字标签
                        a: {
                            color: '#fff',
                            fontSize: 16,
                            padding: [4, 10],
                            borderRadius: 4
                        },
                        // 百分比
                        b: {
                            color: '#fff',
                            fontSize: 16,
                            lineHeight: 50
                        }
                    }
                },
                data: [
                    {
                        value: ''
                    }
                ]
            }
        ]
    }
});
const fn = reactive({
    renderChart() {
        state.option.title = [
            {
                text: '0',
                left: ' 5%',
                top: '75%',
                textStyle: state.textStyle
            },
            {
                text: '100%',
                right: '2%',
                top: '75%',
                textStyle: state.textStyle
            }
        ];
        state.option.series[0].data[0].value = props.value;
        state.option.series[2].data[0].value = props.value;
        state.option.series[2].detail.color = props.numColor;
        state.option.series[2].detail.rich.a.backgroundColor =
            props.text == '达标'
                ? state.goodColor
                : props.text == '不达标'
                ? state.badColor
                : state.noDataColor;
        const myChart = echarts.init(halfRings.value);
        myChart.setOption(state.option);
    }
});
</script>

<template>
    <div ref="halfRings" class="contain"></div>
</template>
<style lang="scss" scoped>
.contain {
    width: 100%;
    height: 200px;
}
</style>
